<template>
    <div class="submit-page">
        <!-- 顶部搜索栏 -->
        <search-sub :isShowCart="false"></search-sub>
        <div class="main">
            <div class="wrap">
                <!-- 配送地址 -->
                <div class="address-wrap">
                    <h1>配送至</h1>
                    <div class="address-con" v-if='!isEmptyAddress'>
                        <h2>{{addressInfo.province_name}}{{addressInfo.regionName}}({{addressInfo.name}}收)</h2>
                        <p>{{ addressInfo.address_detail }}</p>
                        <p>{{ addressInfo.phone }}</p>
                        <span @click="modifyAddress">变更地址</span>
                    </div>
                    <div class="address-con" v-else @click='toAddress'>
                        <dl class="flex-center">
                            <dt class="el-icon-circle-plus"></dt>
                            <dd>新增收货地址</dd>
                        </dl>
                    </div>
                </div>
                <!-- 商品信息 -->
                <order-detail :pageType="0" :goodsList="orderDetail.goodsList" :stylesNum="orderDetail.styles_num" :totalNum="orderDetail.orderTotalNum" :totalPrice="orderDetail.orderTotalPrice"></order-detail>
                <!-- 提交订单 -->
                <div class="submit-btn-wrap">
                    <div class="back-cart" @click="toCart">
                        <i class="iconfont icon-fanhui"></i>
                        <span>返回购物车</span>
                    </div>
                    <el-button class="submit-order" @click='submitOrder' :disabled='isDisabled' :loading="isLoading">提交订单</el-button>
                </div>
            </div>
        </div>
        <select-address ref='selectAddress' @getRadioVal='getRadioVal'></select-address>
    </div>
</template>

<script>
import SearchSub from "@/components/SearchSub.vue";
import OrderDetail from "@/components/OrderDetail";
import {
    preOrder,
    createOrder,
} from '../../api/order'
import SelectAddress from '@/components/SelectAddress.vue';
export default {
    components: {
        SearchSub,
        OrderDetail,
        SelectAddress,
    },
    data() {
        return {
            cartIds: '',
            orderDetail: {},
            loadingPage: true,
            addressInfo: '',
            isEmptyAddress: false,
            isDisabled: false,
            isLoading: false
        };
    },
    created() {
        this.cartIds = this.$route.params.ids;
        this.getOrderInfo();
    },
    methods: {
        getOrderInfo() {
            const that = this;
            preOrder({
                cartIds: this.cartIds,
                mode: 'cart',
                platform: '2'
            }).then(res => {
                that.loadingPage = false
                if (res.code == 0) {
                    that.addressInfo = res.data.address ? res.data.address : {};
                    that.isEmptyAddress = that.isEmptyObject(that.addressInfo);
                    if(!that.isEmptyAddress){
                        res.data.address.province_name = res.data.address.province_name.split('省')[0];
                        res.data.address.regionName = res.data.address.regionName.split('市')[0];
                    }
                    res.data.styles_num = res.data.goodsList.length;
                    that.orderDetail = res.data;
                }
            })
        },
        modifyAddress() {
            this.$refs.selectAddress.add();
            this.$refs.selectAddress.getList()
        },
        getRadioVal(obj) {
            this.addressInfo = obj;
        },
        toAddress(){
            this.$router.push('/user/address')
        },
        submitOrder() {
            // createOrder
            const that = this;
            if(that.isEmptyAddress){
                that.$message.error('还未选择地址！');
                return;
            }
            that.isDisabled = true;
            that.isLoading = true;
            createOrder({
                cartIds: this.cartIds,
                mode: 'cart',
                platform: '2',
                address_id: that.addressInfo.address_id,
                remark: ''
            }).then(res => {
                if (res.code == 0) {
                    that.isDisabled = false;
                    that.isLoading = false;
                    that.$message.success(res.msg);
                    setTimeout(()=>{
                        that.$router.push('/user/order/audit')
                    },10)
                } else {
                    that.isDisabled = false;
                    that.isLoading = false;
                }
            })
        },
        isEmptyObject(obj) {
            for (var key in obj) {
                if (obj.hasOwnProperty(key)) {
                    return false;
                }
            }
            return true;
        },
        toCart(){
            this.$router.push('/cart')
        }

    },
};
</script>
<style lang="scss" scoped>
.main {
    width: 100%;
    padding-bottom: 50px;
    font-size: 14px;
}

.wrap {
    // width: 1180px;
    box-sizing: border-box;
    margin: auto;
    background: #fff;
    border-radius: 12px;
    margin-top: 20px;

    h1 {
        font-size: 16px;
    }
}

.address-wrap {
    h1 {
        font-size: 16px;
        font-weight: bold;
    }
    .address-con {
        width: 461px;
        height: 160px;
        background: url(~@/assets/img/address-bg.png) no-repeat;
        background-size: 100% 100%;
        padding: 0 16px;
        box-sizing: border-box;
        box-shadow: 0px 3px 6px 1px rgba(0, 0, 0, 0.16);
        border-radius: 4px 4px 4px 4px;
        border: 0px solid #707070;
        margin-bottom: 18px;
        margin-top: 25px;
        dl {
            width: 100%;
            height: 100%;
            flex-direction: column;
            dt {
                font-size: 50px;
                color: #ff4401;
            }
            dd {
                color: #ff4401;
                padding-top: 10px;
            }
        }
    }

    h2 {
        padding: 12px 0 10px;
        font-size: 14px;
        font-weight: bold;
        border-bottom: 1px solid #e1e1e1;
    }

    p {
        color: #8f8f8f;
        padding-top: 6px;
    }

    span {
        font-size: 16px;
        color: #ff4401;
        padding-top: 20px;
        display: flex;
    }
}

.submit-btn-wrap {
    width: 100%;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    margin-top: 30px;

    .back-cart {
        color: #5b84d6;
        margin-right: 40px;

        span {
            padding-left: 5px;
        }
    }

    .submit-order {
        width: 130px;
        height: 44px;
        background: #30b30e;
        border-radius: 22px;
        color: #fff;
        border: 0;
        &.is-disabled {
            background-color: rgba(48, 179, 14, 0.5);
            color: rgba(255, 255, 255, 0.5);
        }
    }
}
</style>